import { RouterProvider } from 'react-router-dom';
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
import router from './router';
import { PermissionProvider } from './contexts/PermissionContext';

function App() {
    const theme = createTheme({
        palette: {
            primary: {
                main: '#1890ff'
            }
        },
        shape: {
            borderRadius: 4
        },
        typography: {
            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
        },
        components: {
            MuiButton: {
                styleOverrides: {
                    root: {
                        boxShadow: '0 2px 0 rgba(0, 0, 0, 0.045)'
                    }
                }
            },
            MuiCard: {
                styleOverrides: {
                    root: {
                        borderColor: '#f0f0f0'
                    }
                }
            }
        }
    });

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <PermissionProvider>
                <RouterProvider router={router} />
            </PermissionProvider>
        </ThemeProvider>
    );
}

export default App;
